<template>
    <bi-form ref="form">
        <bi-form-item label="类型" v-if="typeChange" >
            <bi-radio v-model="form.type" :option="typeOption"></bi-radio>
        </bi-form-item>
        <bi-form-item label="上一层">
            <spec-item-node v-model="form.parent_id" :spec="spec" @change="handleParentChange"  required :disabledList="disabledList" ></spec-item-node>
        </bi-form-item>
        <bi-form-item label="标题">
            <bi-input v-model="form.title" placeholder="标题" required></bi-input>
        </bi-form-item>
         
        <bi-form-item label="默认值" v-if="form.type=='text'">
            <bi-input v-model="form.defaultValue" placeholder="默认值"></bi-input>
        </bi-form-item>

        <bi-form-item label="选项" v-if="form.type=='select'" >
            <bi-list dir="column"  :data="form.options" @add="addOption" del-confirm @del="delOption" v-slot="{item,index}"  >
                <div class="row g-2">
                    <div class="col-10">
                        <bi-input v-model="form.options[index]" placeholder="请输入值" />
                    </div>
                    <div class="col-2" style="display: flex;align-items: center;">
                        <input type="radio"  class="form-check-input" :value="index" v-model="selectIndex" />
                    </div>
                </div>
            </bi-list>
        </bi-form-item>
    </bi-form>
</template>

<script>
import specItemNode from '../field/spec-item-node.vue';
export default{
    components:{
        specItemNode
    },
    props:{
        item:Object,
        spec:[Number,String]
    },
    data(){
        let form = {
            item_id:'',
            parent_id:'0',
            title:'',
            defaultValue:'',
            type:'node',
            options:['']
        }



        this.$assign(form,this.item);

        let selectIndex = 0;
        if (this.type=='select' && this.defaultValue!=''){
            this.form.options.forEach((item,index)=>{
                if (item==this.defaultValue){
                    selectIndex = index;
                }
            })
        }

        let disabledList  = [];

        if (this.item){
            disabledList.push(this.item.item_id);
        }


        let typeOption = [
            {value:'node',label:'节点',disabled:form.parent_id!='0'},
            {value:'text',label:'文本'},
            {value:'select',label:'选择'}
        ]

        return {
            form,
            selectIndex,
            disabledList,
            typeOption,
            typeChange:true
        }
    },
    methods:{
        addOption(){
            this.form.options.push('');
        },
        delOption(index){

            
            if (index==this.selectIndex){
                if (index+1 == this.form.options.length){
                    this.selectIndex = index-1;
                }
            }


            this.form.options.splice(index,1);
            if (this.form.options.length == 0){
                this.form.options.push('');
            }
        },
        handleParentChange(item){
            this.typeChange = false;
            
            if (item.item_id!=0){
                
                this.typeOption[0].disabled = true;
                if (this.form.type == 'node'){
                    this.form.type = 'text';
                }
            }else{
                 
                this.typeOption[0].disabled = false;
            }

            this.$nextTick(()=>{
                this.typeChange = true;
            });
        },
        dialogOk(){

            if (this.$refs.form.check()){
                
                if (this.form.type=='select'){
                    this.form.defaultValue = this.form.options[this.selectIndex];
                }

                this.$ajax({
                    url:this.$url({app:'shop','controller':'admin.spec','action':'saveItem'}),
                    data:{
                        ...this.form,
                        spec_id:this.spec,
                    },
                    success:()=>{
                        this.dialog.callback();
                        this.$toast('保存成功');
                        this.dialog.close();
                    }
                });
            }

            return false;
        }

    }
}
</script>